<div class="bg">
  <div class="container">
    <mat-card class="panel-info">
      <mat-card-content class="df" style="display:flex">
        <div class="lt">
          <div class="h">{{ "assets.total_assets" | translate: lang }}</div>
          <div class="b">{{ "assets.hold" | translate: lang }}</div>
        </div>
        <div class="rt">
          <div class="h">
            <mat-checkbox [formControl]="hideSmall">{{
              "assets.hide" | translate: lang
            }}</mat-checkbox>
          </div>
          <div class="b df">
            <div class="eq">
              <div class="i df aic">
                <div class="l" l10nTranslate>assets.crypto</div>
                <div class="r">
                  <i class="icon iconfont">&#xe613;</i>
                  {{ assetsToBtc.total | thousands }} BTC
                </div>
              </div>
              <!-- <div class="i df aic">
                <div class="l">≈Fiat</div>
                <div class="r">
                  <i class="icon iconfont">&#xe611;</i>
                  {{ "0.00000000" | thousands }}
                </div>
              </div> -->
            </div>
            <div class="normal">
              <!-- <div class="i df aic">
                <div class="l">
                  <i class="icon iconfont">&#xe612;</i> Crypto
                </div>
                <div class="r">{{ "0.00000000" | thousands }} BTC</div>
              </div> -->
              <!-- <div class="i df aic">
                <div class="l" l10nTranslate>assets.ava</div>
                <div class="r">{{ assetsToBtc.ava | thousands }} BTC</div>
              </div> -->
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="panel-table">
      <mat-card-header>
        <mat-card-title style="display:flex" class="df jcsb">
          <span></span>
          <div class="df aic">
            <div class="eh-search">
              <input
                placeholder="Find..."
                maxlength="7"
                type="text"
                (input)="onInputSearch($event)"
              />
              <i class="icon iconfont">&#xe606;</i>
            </div>
          </div>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content
        style="
        min-height:375px;    
        display: flex;
        justify-content: space-between;
        flex-direction: column;"
      >
        <table class="eh-table" mat-table [dataSource]="dataSource" matSort>
          <!-- Position Column -->
          <ng-container matColumnDef="coin">
            <th style="width:140px" mat-header-cell *matHeaderCellDef>
              {{ "assets.coin" | translate: lang }}
            </th>
            <td style="width:140px" mat-cell *matCellDef="let item">
              {{ item.coin }}
            </td>
          </ng-container>

          <!-- Name Column -->
          <ng-container matColumnDef="amount">
            <th style="width:140px" mat-header-cell *matHeaderCellDef>
              {{ "assets.amount" | translate: lang }}
            </th>
            <td style="width:140px" mat-cell *matCellDef="let item">
              {{ item.amount }}
            </td>
          </ng-container>

          <!-- Weight Column -->
          <ng-container matColumnDef="ava">
            <th style="width:140px" mat-header-cell *matHeaderCellDef>
              {{ "assets.ava" | translate: lang }}
            </th>
            <td style="width:140px" mat-cell *matCellDef="let item">
              {{ item.ava }}
            </td>
          </ng-container>

          <!-- Symbol Column -->
          <ng-container matColumnDef="frozen">
            <th style="width:140px" mat-header-cell *matHeaderCellDef>
              {{ "assets.frozen" | translate: lang }}
            </th>
            <td style="width:140px" mat-cell *matCellDef="let item">
              {{ item.frozen }}
            </td>
          </ng-container>

          <ng-container matColumnDef="action" stickyEnd>
            <th mat-header-cell *matHeaderCellDef>
              {{ "assets.action" | translate: lang }}
            </th>
            <td mat-cell *matCellDef="let item">
              <a (click)="toDeposit(item)" style="color: #00a45b;">{{
                "assets.deposit" | translate: lang
              }}</a>
              <span
                style="color:#E6E7EA;vertical-align: middle;padding:0 20px;"
              >
                |
              </span>
              <a (click)="toWithdraw(item)" style="color: #DF6C4F;">{{
                "assets.withdraw" | translate: lang
              }}</a>
              <!--
                    <button (click)="toExchange(item)" mat-button>
                      {{ "assets.exchange" | translate: lang }}
                    </button>
                  -->
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>

        <mat-paginator
          [pageSizeOptions]="[5, 10, 20]"
          showFirstLastButtons
        ></mat-paginator>
      </mat-card-content>
    </mat-card>
  </div>
</div>
